import React from 'react'
import { useState, useEffect, useRef } from "react"
import axios from 'axios'
import Left from "../../../Tyj/components/Left.jsx"
import Share from "./Share.jsx"
import ShareClone from "./ShareClone.jsx"
import infoDetailCss from "../css/infoDetail.module.css"
function InfoDetail(props) {
  let infoid = props.match.params.infoid;
  const [data, setdata] = useState([]);
  const [flag, setflag] = useState(true);
  const icoHeight = useRef()
  const islogin = window.JSON.parse(window.localStorage.getItem("user"))
  let height = window.innerHeight;
  const dianzan = function () {
    if (islogin != null) {
      let count = data[0].dianzan + 1;
      axios("/lyq/dianzancount", { params: { infoid: infoid, dianzan: count } }).then((res) => {
      })
      axios("/lyq/infoDetail", { params: { infoid: infoid } }).then((res) => {
        setdata(res.data);
      })
    }
  }
  const shoucang = function () {
    if (islogin != null) {
    }
  }
  const handleScroll = () => {
    console.log(height);
    if (icoHeight.current.offsetTop < height) {
      setflag(false)
    } else {
      setflag(true)
    }
  }
  useEffect(async () => {
    await axios("/lyq/infoDetail", { params: { infoid: infoid } }).then((res) => {
      setdata(res.data);
    })
    // window.addEventListener('scroll', handleScroll);
  }, [])
  return (
    <div className={infoDetailCss.info_detail_box}>
      {data.map((item) => {
        return (
          <div key={item.infoid} className={infoDetailCss.info_detail_container}>
            {/* 左 */}
            {flag == true ? <div className={infoDetailCss.info_detail_left}>
              {/* 点赞分享图标 */}
              <div className={infoDetailCss.icoBox}>
                <div className={infoDetailCss.icoGood}>
                  <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16">
                    <g fill="none" fillRule="evenodd">
                      <rect width="5" height="7" x="1" y="8" stroke="#0FBC5F" strokeWidth="2" rx="1" />
                      <path stroke="#0FBC5F" strokeWidth="2" d="M6 6v7h7.49l1.267-7H6z" />
                      <path fill="#0FBC5F" d="M9 1c.667.667.667 2 0 4H5c1.074-1.126 1.74-1.926 2-2.402C7.213 2.208 7 1 7 1c.004-1.105 1-1 2 0z" />
                    </g>
                  </svg>
                </div>
                <span className={infoDetailCss.goodCount}>点赞</span>
                <div className={infoDetailCss.icoShouCang}>
                  <img src="" alt="" />
                </div>
                <span>收藏</span>
              </div>
              <Share></Share>
            </div> : ""}
            {/* 中 */}
            <div className={infoDetailCss.info_detail_center}>
              {/* 标题头像 */}
              <h3 className={infoDetailCss.title}>{item.title}</h3>
              <div className={infoDetailCss.author_and_date}>
                <div className={infoDetailCss.author}>
                  <img src={item.touxiang} alt="" />
                  <span>{item.author}</span>
                </div>
                <div className={infoDetailCss.date}>
                  <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16">
                    <g fill="none" fillRule="evenodd">
                      <circle cx="8" cy="8" r="7" stroke="#98ADA2" strokeWidth="2" />
                      <path fill="#98ADA2" d="M9 8h2v2H7V5h2v3z" />
                    </g>
                  </svg>
                  <span>{item.time}</span>
                </div>
              </div>
              <img className={infoDetailCss.infoImg} src={item.infoimg} alt="" />
              <p className={infoDetailCss.content}>{item.content}</p>
              <div className={infoDetailCss.interaction}>
                <div></div>
              </div>
              <div className={infoDetailCss.infoBottom}>
                {/* 点赞分享图标 */}
                <div className={infoDetailCss.icoBox} ref={icoHeight}>
                  <div className={infoDetailCss.icoGood} onClick={dianzan}>
                    <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16">
                      <g fill="none" fillRule="evenodd">
                        <rect width="5" height="7" x="1" y="8" stroke="#0FBC5F" strokeWidth="2" rx="1" />
                        <path stroke="#0FBC5F" strokeWidth="2" d="M6 6v7h7.49l1.267-7H6z" />
                        <path fill="#0FBC5F" d="M9 1c.667.667.667 2 0 4H5c1.074-1.126 1.74-1.926 2-2.402C7.213 2.208 7 1 7 1c.004-1.105 1-1 2 0z" />
                      </g>
                    </svg>
                  </div>
                  {islogin == null ? <span className={infoDetailCss.goodCount}>点赞</span> : <span className={infoDetailCss.goodCount}>{item.dianzan}</span>}
                  <div className={infoDetailCss.icoShouCang} onClick={shoucang}>
                    <img src="" alt="" />
                  </div>

                  {islogin == null ? <span>收藏</span> : <span>1</span>}
                </div>
                <div className={infoDetailCss.shareright}>
                  <ShareClone></ShareClone>
                </div>
              </div>
              <hr className={infoDetailCss.lineBottom} />
            </div>
            {/* 右 */}
            <div className={infoDetailCss.info_detail_right}>
              <Left></Left>
            </div>
          </div>
        )
      })}
    </div>
  )
}

export default InfoDetail
